import styled from '@emotion/styled';
import React from 'react';
import { useTranslation } from 'react-i18next';

interface ScanCodeProps {
	code?: string;
	userRole: string;
}

const ScanCodeContanier = styled.div`
	width: 312px;
	background: #fafafb;
	margin: 0 auto;
`;

const ScanCodeContent = styled.div`
	padding: 10px 20px 22px 20px;
`;

const ScanCodeText = styled.p`
	font-size: 12px;
	color: #2a2a2a;
	margin: 0;
	word-break: break-all;
	word-wrap: break-word;
`;

const ScanCodeRole = styled.span`
	font-size: 12px;
	color: #666666;
	margin-bottom: 6px;
	visibility: ${(props: { userRole: string }) => (props.userRole === 'normal' ? 'hidden' : '')};
`;

const ScanCode = (props: ScanCodeProps) => {
	const { t } = useTranslation();
	const { code, userRole } = props;
	return (
		<ScanCodeContanier>
			<ScanCodeContent>
				<ScanCodeRole userRole={userRole}>{userRole}</ScanCodeRole>
				<ScanCodeText>
					{t('scan-result')}:{code}
				</ScanCodeText>
			</ScanCodeContent>
		</ScanCodeContanier>
	);
};

export default ScanCode;
